<template>
  <div :id="uuid" :style="style"></div>
</template>

<script>
import * as echarts from "echarts";
import { options } from "runjs";

const idGn = () => {
  return new Date().getTime() + Math.round(Math.random() * 100);
};
export default {
  computed: {
    style() {
      return {
        height: this.height,
        width: this.width,
      };
    },
  },
  props: {
    height: {
      type: String,
      default: "400px",
    },
    width: {
      type: String,
      default: "600px",
    },
    options: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      uuid: null,
      myChart: null,
    };
  },
  created() {
    this.uuid = idGn();
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById(this.uuid));
    this.myChart.setOption(this.options, true);
  },
  watch: {
    options: {
      handler(newVal, oldVal) {
        if (this.myChart) {
          if (newVal) {
            this.myChart.setOption(newVal);
          } else {
            this.myChart.setOption(oldVal);
          }
        } else {
          this.init();
        }
      },
      deep: true, //对象内部属性的监听，关键。
    },
    // options(){
    //   if(this.myChart.options!=null){
    //     // this.myChart = echarts.init(document.getElementById(this.uuid));
    //     this.myChart.setOption(this.options,true)
    //   }
    // }
  },
};
</script>

<style>
</style>